<template>
       <t-drawer
        :visible.sync="visible"
        showInAttachedElement
        :showOverlay="false"
        size="80%"
        :preventScrollThrough="false"
        header="我的常用意见"
        :onClose="closeDrawer"
      >
      <div class="btn-group-inline">
      <t-button theme="primary" @click="showAdd =true">
       <t-icon name="add" slot="icon"/>
       添加意见
     </t-button>
    </div>
        <t-table
      rowKey="id"
      :data="data"
      :columns="columns"
      :pagination="pagination"
      hover
      :loading="dataLoading"
    >
      <template #op="{row}">
        <t-button @click="deleteRow(row)" size="small" variant="text" class="t-button-link">
          <t-icon  name="delete" slot="icon"/>
          删除
        </t-button>
        <t-button  @click="selectContent(row)" size="small" variant="text" class="t-button-link">
          <t-icon name="add" slot="icon"/>
          选择
        </t-button>
      </template>
    </t-table>
        <template #footer>
          <t-button theme="default" @click="closeDrawer">关闭常用审批意见界面</t-button>
        </template>
    <t-dialog
    :visible.sync="showAdd"
    header="添加意见"
    width="50%"
    :onClose="addCloseDialog"
    :closeOnOverlayClick="false"
    :on-confirm="onConfirmAnother"
    :on-cancel="() => { showAdd = false}"
  >
   <div style="height: 30vh;">
    <t-form ref="form" :data="formData" :rules="rules"  labelWidth="100px">
        <t-form-item label="排序" name="sort">
        <t-input-number clearable v-model="formData.sort" :min="1" placeholder="请输入"/>
       </t-form-item>
      <t-form-item label="意见内容" name="content">
        <t-textarea :autosize="{minRows: 8}"
            v-model.trim="formData.content" placeholder="请输入内容"/>
      </t-form-item>
    </t-form>
    </div>
  </t-dialog>
      </t-drawer>
</template>
<script>
export default {
  name: 'KjxtfrontNewApprovalOpinionsListDialog',
  data() {
    return {
      visible:true,
      showAdd:false,
      dataLoading:false,
      columns:[
        { colKey: 'sort', width: 80, title: '序号',align: "center" },
        { colKey: 'content', title: '意见内容', align: "center",},
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 200
        },
      ],
      formData:{
        content:"",
        sort:"1"
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination, pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      data:[],
      rules:{
        sort: [
          {
            required: true,
            message: "排序不能为空",
          }
        ],
        content: [
          {
            required: true,
            message: "内容不能为空",
          }
        ],
      }
    };
  },

  created() {
    this.getList()
  },
  methods: {
    getList(){
      this.dataLoading =true
      this.$api.system.feedback.myApprovalOpinionsByList(this.queryParams).then(res => {
        this.pagination.total = res.total || 0;
        if(res.rows) {
          this.data = res.rows || []
        }
      }).catch((e) => {
        this.$message.error(e.toString());
      }).finally(() => {
        this.dataLoading =false
      })
    },
    addCloseDialog(){
      this.showAdd =false
      this.formData.content =''
      this.formData.sort ='1'
      this.$refs.form.clearValidate()
    },
    // 添加意见
    onConfirmAnother() {
      this.$refs.form.validate().then(valid => {
        if(valid === true) {
          this.$api.system.feedback.myApprovalOpinionsByAdd(this.formData).then(res => {
            this.$message.success("添加成功");
            this.addCloseDialog()
            this.getList()
          }).catch((e) => {
            this.$message.error(e.toString());
          });
        }
      })
      
    },
    // 删除
    deleteRow(row) {
      const confirmDia = this.$dialog.confirm({
        header: "系统提示",
        body: `是否确认删除？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          this.$api.system.feedback.myApprovalOpinionsByDel(row.id).then(
            () => {
              this.getList();
              this.$message.success("删除成功");
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            this.$message.error(e.toString());
          });
        }
      });
    },
    // 选择
    selectContent(row) {
      this.$emit("selectContent", row.content);
      this.closeDrawer()
    },
    closeDrawer() {
      this.$emit("update:visible", false);
    },
  },
};
</script>